<template>
  <div class="app-container" style="padding: 0">
    <div style="font-size: 35px;text-align: center;margin-top: 50px">
      购买会员享高级功能
    </div>
<!--    <div class="header"><span class="header-icon"></span><span class="header-title">会员价格</span></div>-->

    <el-row class="card-row buy-products__main" :gutter="20" style="margin-top: 14px;margin-top: 100px">
      <el-col :span="6" v-for="(item,index) of vipList" :key="index" class="buy-product-card"
              style="padding: 0PX !important;">
        <div class="buy-product-cards-main">
          <div class="buy-product-cards-main__version"
               :style="{ background: 'url(' + item.backgroudImage + ')' }">
            <h4 class="buy-product-cards-main__title">
              <dict-tag :options="dict.type.vip_type" :value="item.vipType"/>
              <span class="buy-product-cards-main__count-tip"></span>
            </h4>
            <div class="buy-product-cards-main__promotion-tip">
              <p >{{ item.description }}</p>
            </div>
          </div>

        </div>
        <div class="buy-product-cards-main__main">
          <div>
            <div class="buy-product-cards-main__main_text">
              <div class="buy-product-cards-main__price">
                <span>￥</span>
                <span class="buy-product-cards-main__num">{{ item.price }}</span>
                <span class="buy-product-cards-main__unit">/月</span>
              </div>
            </div>
            <div class="buy-product-cards-main__main_desc">
              <p style="line-height: 23px;    height: 23px;">{{ item.description }}</p>
            </div>
          </div>
          <div class="buy-product-cards-main__checkout-wrap">
            <div class="toggle-enter-create-button buy-product-cards-main__toggle-btn">
              <div class="toggle-enter-create-button__to-home">
                <button @click="handleClickBuy(item)" type="button" class="member_botton"  :style="{'background-color':item.buttonColor ,color:item.buttonColor ? '#FFFFFF':'black'}" > {{ item.buttonColor ? '立即购买' : '去使用' }}</button>
              </div>
            </div>
          </div>
        </div>
        <div class="buy-product-card-rights buy-product-card-rights--without-desc">
          <div class="buy-product-card-rights__main">
            <div class="buy-product-card-rights__rights">
              <div class="buy-product-card-rights__rights-main">

                <div class="buy-product-card-rights__desc-item" v-for="(tools,i ) of item.payData" :key="i">
                  <i v-if="tools.status=='0'" class="el-icon-error buy-product-card-rights__icon" style="color:rgb(255 81 73);font-weight: bold"></i>
                  <i v-else class="el-icon-success buy-product-card-rights__icon" style="color: #2f54eb;font-weight: bold" />
                  <span class="buy-product-card-rights__content">
                    <span>{{tools.tool}}</span>
                  </span>
                </div>
              </div>
            </div>
          </div>
        </div>
      </el-col>
    </el-row>

<!--   购买会员  -->
    <el-dialog title="购买会员" :visible.sync="showPayCode"  width="500px" @close="closeModel"  append-to-body>
        <el-form v-if="!showQRCode" ref="form" :model="payForm"  :rules="rules" label-width="100px">
              <el-form-item label="购买版本：" prop="version">
                <el-radio-group v-model="payForm.version">
                  <el-radio label="1">标准版</el-radio>
                  <el-radio label="2">专业版</el-radio>
                  <el-radio label="3">旗舰版</el-radio>
                </el-radio-group>
              </el-form-item>
          <el-row :gutter="24" >
            <el-col :span="12">
              <el-form-item label="购买套餐：" prop="accountId">
                <div  style="display:flex;width: 300px;">
                <el-card
                  style="width: 200px;"
                  @mouseenter.native="onCardHover(true)"
                  @mouseleave.native="onCardHover(false)"
                  :body-style="{
                    padding: '30px',
                    textAlign:'center',
                    border: selectedPackage === 'month' ? '2px solid #409eff' : '2px solid transparent',
                    borderRadius: '5px',
                    cursor: 'pointer'
                  }"
                  @click.native="selectPackage('month')"
                >
                  <div style="font-size: 16px;">月卡</div>
                  <div style="font-size: 20px;color: #000000;margin-bottom: 10px">￥ {{ vipList[payForm.version].price  }}</div>
                </el-card>
                <el-card
                  style="margin-left: 10px;width: 200px;"
                  @mouseenter.native="onCardHover(true)"
                  @mouseleave.native="onCardHover(false)"
                  :body-style="{
                    padding: '30px',
                    textAlign:'center',
                    border: selectedPackage === 'year' ? '2px solid #409eff' : '2px solid transparent',
                    borderRadius: '5px',
                    cursor: 'pointer'
                  }"
                  @click.native="selectPackage('year')"
                >
                  <div style="font-size: 16px;">年卡</div>
                  <div style="font-size: 20px;color: #000000;margin-bottom: 10px">￥ {{ vipList[payForm.version].price * 11 }}</div>
                </el-card>
                </div>
              </el-form-item>
            </el-col>
          </el-row>

          <el-row :gutter="24">
            <el-col :span="24">
              <el-form-item label="购买时长：" prop="accountId">
                <el-input v-model="payForm.duration" type="number" :min="1" style="width: 90px;"></el-input><span style="margin-left: 9px;font-size: 17px">/{{ payForm.timeType === 'year' ? '年' : '月'}}</span>
              </el-form-item>
            </el-col>
          </el-row>

          <el-row :gutter="24">
            <el-col :span="24">
              <el-form-item label="应付金额：" prop="accountId">
                <div style="font-size: 20px;">
                  <span style="font-size: 13px;color: #ec1515;">￥</span><span style="color: #ec1515;font-size: 30px">
                  {{ selectedPackage === 'month' ?  (vipList[payForm.version].price * payForm.duration) + '.00'  : (vipList[payForm.version].price * 12 * payForm.duration)  + '.00' }}
                  </span>
                </div>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      <div slot="footer" v-if="!showQRCode" class="dialog-footer">
        <el-button :loading="buttonLoading" type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>


<!--      显示二维码  -->
        <div v-if="showQRCode" style="text-align: center">
          <div style="margin-bottom: 20px;height: 200px;">
            <div style="position:relative;">
              <img style="width: 140px;"  src="@/assets/images/scanBorder.png"/>
              <div id="qrcode" ref="qrcode" style="position: absolute;left: 37%;top: 10px"></div>
            </div>
            <div style="margin-top: 20px">
              <span style="font-size: 17px">请使用微信扫码支付</span>
              <img style="width: 15px;margin-left: 3px;height: 15px;margin-top: 20px" src="@/assets/images/wechatPay.png"/>
              <div style="font-size: 17px">支付成功后将自动开通</div>
            </div>
          </div>
        </div>

    </el-dialog>


  </div>
</template>

<script>
import { wechatPay } from "@/api/media/pay";
import QRCode from "qrcodejs2";
import {listVipProduct} from "@/api/sysConfig/vipProduct";
import {Message} from "element-ui";
export default {
  name: "Member",
  dicts: ['vip_type'],
  data() {
    return {
      showQRCode:false,
      buttonLoading:false,
      showPayCode:false,
      selectedPackage: 'month',
      qrcode:'',
      payForm:{
        version:'1',
        duration:1,
        timeType:'month',
      },
      vipList:[],
    }
  },


  /**
   *
   */
  created() {
    this.getVipList();

  },

  methods: {
    /**
     * 获取会员列表数据
     */
    getVipList(){
      listVipProduct({}).then((res)=>{
        if(res.code === 200){
          let data = res.rows.map((item) => {
            let payData = eval(item.softwareBasics);
            return { ...item, payData ,softwareBasics: undefined};
          });
          this.vipList =  data
        }
      })
    },

    /**
     * 提交支付参数
     */
    async submitForm(){
      let that =this;
      this.showQRCode = true;
      this.showPayCode = true;
      await wechatPay(this.payForm).then((res)=>{
        console.log(res.data.codeUrl)
        if(res.code === 200){
          that.createQRCode(res.data.codeUrl)
        }else{
          Message.warning("网络错误！")
        }
      })
    },


    /**
     * 关闭弹框后停止调用
     */
    closeModel(){
      let that = this;
      this.showPayCode = false
      setTimeout(()=>{
        that.showQRCode = false
      },500)
    },

    /**
     * 取消关闭支付页
     */
    cancel(){
      this.showPayCode = false
    },

    /**
     * 点击类型按钮
     * @returns {Promise<void>}
     */
   async handleClickBuy(item) {
      this.payForm.version = item.vipType + '';
      this.showPayCode = true
    },


    selectPackage(packageType) {
      this.payForm.timeType = packageType;
      this.selectedPackage = packageType;
    },

    onCardHover(isHovered) {
      // Implement your desired hover effect here
      if (isHovered) {
        // Add hover effect
        // Example: Change the background color of the card
        // You can use CSS classes or inline styles
        // For example: this.cardHovered = true;
      } else {
        // Remove hover effect
        // Example: Reset the background color of the card
        // For example: this.cardHovered = false;
      }
    },

    /**
     * 创建二维码
     * @param row
     */
    createQRCode(content){
      this.$refs['qrcode'].innerHTML = ''
      this.qrcode = new QRCode('qrcode', {
        text: content,
        width: 120, //图像宽度
        height: 120, //图像高度
        colorDark : "#000000", //前景色
        colorLight : "#ffffff", //背景色
        typeNumber:4,
        correctLevel : QRCode.CorrectLevel.H //容错级别 容错级别有：（1）QRCode.CorrectLevel.L （2）QRCode.CorrectLevel.M （3）QRCode.CorrectLevel.Q （4）QRCode.CorrectLevel.H
      })
    },
  }
}
</script>

<style scoped lang="scss">
.buy-products__main {
  --vip-color: #A5AAB1;
  --hover-color: #F6F7F9;
  padding-left: 10px;
  padding-right: 10px;
  display: flex;
  gap: 20px;
  justify-content: center;

  .buy-product-card {
    border: 1px solid #ececec;
    position: relative;
    display: flex;
    box-sizing: border-box;
    flex-direction: column;
    width: 320px;
    //height: 622px;
    overflow: hidden;
    background: #fff;
    border-radius: 16Px;
    transition: all .2s ease-in-out;

    .buy-product-cards-main {
      position: relative;
      box-sizing: border-box;
      flex: 0 0 auto;
      background: #fff;
      border-radius: 12px 12px 0 0;

      .buy-product-cards-main__version {
        position: relative;
        min-height: 108px;
        padding: 28px 28px 20px 16px;
        background-color: var(--vip-color);
        background-size: 100% 100% !important;
        border-radius: 12px 12px 0 0;

        .buy-product-cards-main__title {
          margin-bottom: 8px;
          font-size: 20px;
          font-weight: 600;
          line-height: 24px;
          color: #fff;

          .buy-product-cards-main__count-tip {
            font-size: 12px;
            line-height: 17px;
            color: #fff;
            opacity: .8;

            p {
              margin-bottom: 0;
              font-size: 14px;
              font-weight: 400;
              line-height: 150%;
              color: #fff;
            }
          }
        }

        .buy-product-cards-main__promotion-tip {
          height: 45px;
          margin-bottom: 0;
          font-size: 14px;
          font-weight: 400;
          line-height: 150%;
          color: #fff;
        }
      }


    }

    .buy-product-card-rights {
      padding: 28px 16px;
      margin-top: -10px;
      overflow: hidden;
      text-align: left;
      background-color: #fff9;
      border-bottom-right-radius: 12px;
      border-bottom-left-radius: 12px;

      .buy-product-card-rights__rights {
        .buy-product-card-rights__rights-main {
          .buy-product-card-rights__desc-item {
            display: flex;
            flex: 0 0 50%;
            align-items: center;
            margin-bottom: 12px;
            font-size: 12px;
            font-weight: 500;
            line-height: 20px;
            color: #f54531;

            .buy-product-card-rights__icon {
              align-self: flex-start;
              margin-top: 3px;
              margin-right: 7px;
              font-size: 14px;
            }

            .buy-product-card-rights__content {
              font-size: 12px;
              font-weight: 500;
              line-height: 18px;
              color: #636c78;
            }
          }
        }
      }
    }


    &:hover{
      transform: translate(0px, -15px);
      box-shadow:0px 8px 18px rgb(0 0 0 / 20%)
    }

  }
}


.buy-product-cards-main__main {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 28px 0;
  margin: 0 20px;
  background: #fff;
  border-bottom: 1px solid #e8eaec;

  .buy-product-cards-main__main_text {
    display: flex;
    flex: 1;
    align-items: center;
    justify-content: flex-start;
    margin-bottom: 20px;

    .buy-product-cards-main__price {
      position: relative;
      font-size: 16px;
      font-weight: 500;
      line-height: 16px;
      color: #000;

      .buy-product-cards-main__num {
        margin-right: 4px;
        font-size: 40px;
        font-weight: 600;
        line-height: 48px;
        color: #33383e;
        text-align: center;
      }

      .buy-product-cards-main__unit {
        font-weight: 400;
        opacity: .7;
      }
    }
  }

  .buy-product-cards-main__main_desc {
    height: 44px;
    font-size: 12px;
    font-weight: 400;
    line-height: 10px;
    color: #4c535c;
  }
}

.member_botton {
  width: 15vw;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 5vh;
  //color: #FFFFFF;
  background-color: #ffffff;
  border: 1px solid #f1f1f1;
  border-radius: 5px;
  margin: 10px auto;
  cursor: pointer;
  &:hover{
    opacity: 0.8;
  }
}

</style>
